'use client'

import { useEffect, useState } from "react";
import { KanoRow, ShareInfo } from "@/grpc/types";
import { RequirementInfo, KanoInfo, FourQInfo, IssueInfo } from "@/grpc/types";
import { Card, List, Space } from "antd";
import { IssueList } from "./issue/IssueList";

//颜色用到了逻辑里面，颜色不能相同
const ITEM_A_COLOR = "#DC9C64";
const ITEM_O_COLOR = "#53B27D";
const ITEM_M_COLOR = "#F59183";
const ITEM_I_COLOR = "#6786A4"
const ITEM_R_COLOR = "#03F3FF";
const ITEM_Q_COLOR = "#C2C2C2";


export interface RequireMentPanelProps {
    shareInfo: ShareInfo;
}

export function RequireMentPanel(props: RequireMentPanelProps) {
    const [requirementInfo, setRequirementInfo] = useState<RequirementInfo | null>(null);
    const [reqErrorMsg, setReqErrorMsg] = useState("");
    const [kanoInfo, setKanoInfo] = useState<KanoInfo | null>(null);
    const [kanoErrorMsg, setKanoErrorMsg] = useState("");
    const [fourQInfo, setFourQInfo] = useState<FourQInfo | null>(null);
    const [fourQErrorMsg, setFourQErrorMsg] = useState("");
    const [issueInfoList, setIssueInfoList] = useState<IssueInfo[]>([]);
    const [issueListErrorMsg, setIssueListErrorMsg] = useState("");

    const loadRequirementInfo = async () => {
        const res = await fetch(`/api/requirement/info?id=${props.shareInfo.shareId}&secret=${props.shareInfo.shareSecret}`);
        const resData = await res.json() as {
            code: number;
            errMsg: string;
            requirement: RequirementInfo;
        };
        if (resData.code == 0) {
            setRequirementInfo(resData.requirement);
        } else {
            setReqErrorMsg(resData.errMsg);
        }
    };

    const loadKanoInfo = async () => {
        const res = await fetch(`/api/requirement/kano?id=${props.shareInfo.shareId}&secret=${props.shareInfo.shareSecret}`);
        const resData = await res.json() as {
            code: number;
            errMsg: string;
            kanoInfo: RequirementInfo;
        };
        if (resData.code == 0) {
            setKanoInfo(resData.kanoInfo);
        } else {
            setKanoErrorMsg(resData.errMsg);
        }
    };

    const loadFourQInfo = async () => {
        const res = await fetch(`/api/requirement/fourq?id=${props.shareInfo.shareId}&secret=${props.shareInfo.shareSecret}`);
        const resData = await res.json() as {
            code: number;
            errMsg: string;
            fourQInfo: RequirementInfo;
        };
        if (resData.code == 0) {
            setFourQInfo(resData.fourQInfo);
        } else {
            setFourQErrorMsg(resData.errMsg);
        }
    };

    const loadIssueInfoList = async () => {
        const res = await fetch(`/api/issue/list?id=${props.shareInfo.shareId}&secret=${props.shareInfo.shareSecret}`);
        const resData = await res.json() as {
            code: number;
            errMsg: string;
            infoList: IssueInfo[];
        };
        if (resData.code == 0) {
            setIssueInfoList(resData.infoList);
        } else {
            setIssueListErrorMsg(resData.errMsg);
        }
    };

    const getTotalByRow = (row: KanoRow) => {
        return (
            (row.like ?? 0) +
            (row.expect ?? 0) +
            (row.neutral ?? 0) +
            (row.tolerate ?? 0) +
            (row.dislike ?? 0)
        );
    };
    const getTotal = () => {
        if (kanoInfo == null) {
            return 0;
        }
        return getTotalByRow(kanoInfo.likeVsRow!) + getTotalByRow(kanoInfo.expectVsRow!) + getTotalByRow(kanoInfo.neutralVsRow!) +
            getTotalByRow(kanoInfo.tolerateVsRow!) + getTotalByRow(kanoInfo.dislikeVsRow!);
    };

    const getStatA = () => {
        if (kanoInfo == null) {
            return 0;
        }
        const total = getTotal();
        if (total < 0.000002) {
            return 0;
        }
        return ((kanoInfo.likeVsRow?.expect ?? 0) + (kanoInfo.likeVsRow?.neutral ?? 0) + (kanoInfo.likeVsRow?.tolerate ?? 0)) / total;
    };
    const getStatO = () => {
        if (kanoInfo == null) {
            return 0;
        }
        const total = getTotal();
        if (total < 0.000002) {
            return 0;
        }
        return (kanoInfo.likeVsRow?.dislike ?? 0) / total;
    };
    const getStatM = () => {
        if (kanoInfo == null) {
            return 0;
        }
        const total = getTotal();
        if (total < 0.000002) {
            return 0;
        }
        return ((kanoInfo.expectVsRow?.dislike ?? 0) + (kanoInfo.neutralVsRow?.dislike ?? 0) + (kanoInfo.tolerateVsRow?.dislike ?? 0)) / total;
    };
    const getStatI = () => {
        if (kanoInfo == null) {
            return 0;
        }
        const total = getTotal();
        if (total < 0.000002) {
            return 0;
        }
        return ((kanoInfo.expectVsRow?.expect ?? 0) + (kanoInfo.expectVsRow?.neutral ?? 0) + (kanoInfo.expectVsRow?.tolerate ?? 0) +
            (kanoInfo.neutralVsRow?.expect ?? 0) + (kanoInfo.neutralVsRow?.neutral ?? 0) + (kanoInfo.neutralVsRow?.tolerate ?? 0) +
            (kanoInfo.tolerateVsRow?.expect ?? 0) + (kanoInfo.tolerateVsRow?.neutral ?? 0) + (kanoInfo.tolerateVsRow?.tolerate ?? 0)) / total;
    };
    const getStatR = () => {
        if (kanoInfo == null) {
            return 0;
        }
        const total = getTotal();
        if (total < 0.000002) {
            return 0;
        }
        return ((kanoInfo.expectVsRow?.like ?? 0) + (kanoInfo.neutralVsRow?.like ?? 0) + (kanoInfo.tolerateVsRow?.like ?? 0) + (kanoInfo.dislikeVsRow?.like ?? 0) +
            (kanoInfo.dislikeVsRow?.expect ?? 0) + (kanoInfo.dislikeVsRow?.neutral ?? 0) + (kanoInfo.dislikeVsRow?.tolerate ?? 0)) / total;
    };
    const getStatQ = () => {
        if (kanoInfo == null) {
            return 0;
        }
        const total = getTotal();
        if (total < 0.000002) {
            return 0;
        }
        return ((kanoInfo.likeVsRow?.like ?? 0) + (kanoInfo.dislikeVsRow?.dislike ?? 0)) / total;
    };

    const getImportantValue = () => {
        if (fourQInfo == null) {
            return 0;
        }
        const total = fourQInfo.urgentAndImportant! + fourQInfo.urgentAndNotImportant! + fourQInfo.notUrgentAndNotImportant! + fourQInfo.notUrgentAndImportant!;
        if (total <= 0.000002) {
            return 0;
        }
        return (fourQInfo.urgentAndImportant! + fourQInfo.notUrgentAndImportant!) / total;
    };

    const getUrgentValue = () => {
        if (fourQInfo == null) {
            return 0;
        }
        const total = fourQInfo.urgentAndImportant! + fourQInfo.urgentAndNotImportant! + fourQInfo.notUrgentAndNotImportant! + fourQInfo.notUrgentAndImportant!;
        if (total <= 0.000002) {
            return 0;
        }
        return (fourQInfo.urgentAndImportant! + fourQInfo.urgentAndNotImportant!) / total;
    };

    useEffect(() => {
        loadRequirementInfo();
        loadKanoInfo();
        loadFourQInfo();
        loadIssueInfoList();
    }, []);

    return (
        <>
            <style jsx>
                {`
                td {
                    border: 1px solid black;
                    text-align: center;
                    vertical-align: middle;
                    line-height: 40px;
                    font-weight: 500;
                    min-width: 150px;
                }
            `}
            </style>
            {requirementInfo == null && reqErrorMsg != "" && reqErrorMsg}
            {kanoInfo == null && kanoErrorMsg != "" && kanoErrorMsg}
            {fourQInfo == null && fourQErrorMsg != "" && fourQErrorMsg}
            {issueInfoList.length == 0 && issueListErrorMsg != "" && issueListErrorMsg}

            {requirementInfo != null && (
                <Card title={requirementInfo.baseInfo?.title ?? ""} headStyle={{backgroundColor:"#eee"}}>
                    xx
                </Card>
            )}

            {issueInfoList.length > 0 && (
                <Card title="相关任务" headStyle={{backgroundColor:"#eee"}}>
                    <IssueList issueInfoList={issueInfoList} />
                </Card>
            )}
            
            {kanoInfo != null && (
                <Card title="Kano评估" headStyle={{backgroundColor:"#eee"}}>
                    <table>
                        <tbody>
                            <tr>
                                <td colSpan={2} rowSpan={2} style={{ fontSize: "20px", fontWeight: 800 }}>调研结果</td>
                                <td colSpan={5} style={{ fontWeight: 700 }}>不实现此需求</td>
                            </tr>
                            <tr>
                                <td>非常喜欢</td>
                                <td>理应如此</td>
                                <td>无所谓</td>
                                <td>勉强接受</td>
                                <td>不喜欢</td>
                            </tr>
                            <tr>
                                <td rowSpan={5} style={{ writingMode: "vertical-rl", width: "10px", fontWeight: 700 }}>实现此需求</td>
                                <td>非常喜欢</td>
                                <td style={{ backgroundColor: ITEM_Q_COLOR }}>
                                    <span>{kanoInfo.likeVsRow?.like}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_A_COLOR }}>
                                    <span>{kanoInfo.likeVsRow?.expect}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_A_COLOR }}>
                                    <span>{kanoInfo.likeVsRow?.neutral}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_A_COLOR }}>
                                    <span>{kanoInfo.likeVsRow?.tolerate}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_O_COLOR }}>
                                    <span>{kanoInfo.likeVsRow?.dislike}人</span>
                                </td>
                            </tr>
                            <tr>
                                <td>理应如此</td>
                                <td style={{ backgroundColor: ITEM_R_COLOR }}>
                                    <span>{kanoInfo.expectVsRow?.like}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_I_COLOR }}>
                                    <span>{kanoInfo.expectVsRow?.expect}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_I_COLOR }}>
                                    <span>{kanoInfo.expectVsRow?.neutral}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_I_COLOR }}>
                                    <span>{kanoInfo.expectVsRow?.tolerate}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_M_COLOR }}>
                                    <span>{kanoInfo.expectVsRow?.dislike}人</span>
                                </td>
                            </tr>
                            <tr>
                                <td>无所谓</td>
                                <td style={{ backgroundColor: ITEM_R_COLOR }}>
                                    <span>{kanoInfo.neutralVsRow?.like}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_I_COLOR }}>
                                    <span>{kanoInfo.neutralVsRow?.expect}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_I_COLOR }}>
                                    <span>{kanoInfo.neutralVsRow?.neutral}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_I_COLOR }}>
                                    <span>{kanoInfo.neutralVsRow?.tolerate}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_M_COLOR }}>
                                    <span>{kanoInfo.neutralVsRow?.dislike}人</span>
                                </td>
                            </tr>
                            <tr>
                                <td>勉强接受</td>
                                <td style={{ backgroundColor: ITEM_R_COLOR }}>
                                    <span>{kanoInfo.tolerateVsRow?.like}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_I_COLOR }}>
                                    <span>{kanoInfo.tolerateVsRow?.expect}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_I_COLOR }}>
                                    <span>{kanoInfo.tolerateVsRow?.neutral}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_I_COLOR }}>
                                    <span>{kanoInfo.tolerateVsRow?.tolerate}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_M_COLOR }}>
                                    <span>{kanoInfo.tolerateVsRow?.dislike}人</span>
                                </td>
                            </tr>
                            <tr>
                                <td>不喜欢</td>
                                <td style={{ backgroundColor: ITEM_R_COLOR }}>
                                    <span>{kanoInfo.dislikeVsRow?.like}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_R_COLOR }}>
                                    <span>{kanoInfo.dislikeVsRow?.expect}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_R_COLOR }}>
                                    <span>{kanoInfo.dislikeVsRow?.neutral}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_R_COLOR }}>
                                    <span>{kanoInfo.dislikeVsRow?.tolerate}人</span>
                                </td>
                                <td style={{ backgroundColor: ITEM_Q_COLOR }}>
                                    <span>{kanoInfo.dislikeVsRow?.dislike}人</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <List grid={{ gutter: 16 }} style={{ marginTop: "10px" }}
                        dataSource={[
                            {
                                label: "A：兴奋型",
                                color: ITEM_A_COLOR,
                            },
                            {
                                label: "O：期望型",
                                color: ITEM_O_COLOR,
                            },
                            {
                                label: "M：基础型",
                                color: ITEM_M_COLOR,
                            },
                            {
                                label: "I：无差异",
                                color: ITEM_I_COLOR,
                            },
                            {
                                label: "R：反向型",
                                color: ITEM_R_COLOR,
                            },
                            {
                                label: "Q：可疑结果",
                                color: ITEM_Q_COLOR,
                            },
                        ]} renderItem={(item) => (
                            <List.Item>
                                <Space style={{ backgroundColor: item.color, padding: "2px 10px" }}>
                                    {item.label}
                                    {item.color == ITEM_A_COLOR && getStatA().toFixed(3)}
                                    {item.color == ITEM_O_COLOR && getStatO().toFixed(3)}
                                    {item.color == ITEM_M_COLOR && getStatM().toFixed(3)}
                                    {item.color == ITEM_I_COLOR && getStatI().toFixed(3)}
                                    {item.color == ITEM_R_COLOR && getStatR().toFixed(3)}
                                    {item.color == ITEM_Q_COLOR && getStatQ().toFixed(3)}
                                </Space>
                            </List.Item>
                        )} />
                </Card >
            )
            }

            {
                fourQInfo != null && (
                    <Card title="四象限评估" headStyle={{backgroundColor:"#eee"}}>
                        <table>
                            <tr>
                                <td>
                                    <Space size="large">
                                        紧急但不重要
                                        <span>{fourQInfo.urgentAndImportant}人</span>
                                    </Space>
                                </td>
                                <td>
                                    <Space size="large">
                                        紧急且重要
                                        <span>{fourQInfo.urgentAndImportant}人</span>
                                    </Space>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <Space size="large">
                                        既不紧急也不重要
                                        <span>{fourQInfo.notUrgentAndNotImportant}人</span>
                                    </Space>
                                </td>
                                <td>
                                    <Space size="large">
                                        重要但不紧急
                                        <span>{fourQInfo.notUrgentAndImportant}人</span>
                                    </Space>
                                </td>
                            </tr>
                        </table>
                        <div style={{ display: "flex" }}>
                            <div style={{ width: 150 }}>重要系数：{getImportantValue().toFixed(3)}</div>
                            <div style={{ width: 150 }}>紧急系数：{getUrgentValue().toFixed(3)}</div>
                        </div>
                    </Card>
                )
            }
        </>
    );
}